import { useRef } from "react";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, updateStatus } from "@/api/user";
import { Avatar } from "antd";
import useUpdateStatus from "@/hooks/useUpdateStatus";
import { statusOptions, vipOptions } from "@/const";

export default () => {
  const actionRef = useRef();

  const columns = [
    {
      title: "真实姓名",
      dataIndex: "realName",
    },
    {
      title: "头像",
      dataIndex: "avatar",
      search: false,
      render: (_, record) => {
        return <Avatar src={record.avatar}></Avatar>;
      },
    },
    { title: "手机号码", dataIndex: "mobile" },
    {
      title: "昵称",
      dataIndex: "nickName",
      search: false,
    },
    {
      title: "生日",
      dataIndex: "birthday",
      search: false,
    },
    {
      title: "用户标签",
      dataIndex: "vip",
      valueType: "select",
      fieldProps: {
        options: vipOptions,
      },
    },
    {
      title: "押金",
      dataIndex: "nickName",
      search: false,
    },
    {
      title: "积分",
      dataIndex: "nickName",
      search: false,
    },
    {
      title: "是否禁用",
      dataIndex: "onTheShelf",
      valueType: "select",
      width: 150,
      fieldProps: {
        options: statusOptions,
      },
      search: false,
      render: (_, record) => {
        return useUpdateStatus(
          updateStatus,
          record,
          actionRef,
          null,
          false,
          "status"
        );
      },
    },
    {
      title: "注册时间",
      search: false,
      dataIndex: "createTime",
    },
  ];
  return (
    <PageContainer>
      {useCommonTable({
        actionRef,
        hiddenAction: true,
        columns,
        modalWidth: 700,
        fetchList,
        renderAdd: () => {},
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
